import React, { Component,Fragment } from 'react';
import './style.css'
import './TodoItem'

//JSX模板语法
class TodoList extends Component {
    //类的构造函数，最优先执行的函数
    constructor(props){ 
        super(props);//调用父类构造函数
        this.state = {//组件状态
            inputValue:'',
            list:[]
        }
    }
    render(){
        /* 使用变量加{} */
        return (
            <Fragment>
                <div> 
                    {/* 下面是JSX的注释 */}
                    <label htmlFor="insertArea">输入内容：</label>
                    <input d
                        id="insertArea"
                        className="input"
                        value={this.state.inputValue} 
                        onChange={this.handleInputChange.bind(this)}/>
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return(
                                <div>
                                    <li key={index} 
                                        onClick={this.handleItemDelete.bind(this,index)}
                                        dangerouslySetInnerHTML = {{__html:item}}
                                    ></li> 
                                </div>
                           
                            ) 
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    handleInputChange(e){
        // 改变state里面的数据
        this.setState({
           inputValue:e.target.value 
        })
        // console.log(e)
    }
    handleBtnClick(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    handleItemDelete(index){
        // immutable语法 : state不允许任何改变
        let list =  [...this.state.list]
        list.splice(index,1)
        // let list =  this.state.list.splice(index,1)
        this.setState({
            list
        })
        console.log('index',index)
    }
}

export default TodoList;
